{% extends "base.jinja2" %}

{% block mainbody %}
    <div style="clear: both"></div>
    <link href="./css/map_styles.css" rel="stylesheet">

    <div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">

        <ul id="main-nav" class="main-nav nav nav-tabs nav-stacked" style="width: 100%">
            {{ left_nav }}
        </ul>

        <div style="clear: both"></div>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">

        <div class="col-sm-10">
            <br>

            <div class="col-sm-12">
                <ol class="breadcrumb">
                    <li><a href="index.html">首页</a></li>
                    <li>{{ mname }}</li>
                    <li><a href="{{ lyr_name }}.html">{{ title }}</a></li>

                </ol>

                <div id='map'></div>

                <script type="text/javascript">
                    var popup = L.popup();

                    function onMapClick(e) {
                        popup
                                .setLatLng(e.latlng)
                                .setContent("Location:" + e.latlng.toString())
                                .openOn(map);
                    }
                    var map = L.map('map', {
                        center: [0, 0],
                        zoom: 2
                    });

                    var the_basemap = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
                        maxZoom: 18,
                        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                        id: 'mapbox.light'
                    }).addTo(map);

                    {#192.168.56.1#}
                    {%  for lyr in layers %}
                        var lyr_{{ lyr }} = L.tileLayer.wms('http://{{ IP }}/service?', {
                            layers: '{{ lyr }}',
                            format: 'image/png',
                            transparent: true

                        }).addTo(map);

                    {%  endfor %}
                    map.on('click', onMapClick);
                    var baseMaps = {
                        'BaseMap': the_basemap
                    };
                    var overlayMaps = {
                        {%  for lyr in layers %}
                            '{{ lyr }}': lyr_{{ lyr }},
                        {%  endfor %}
                    };

                    L.control.layers(baseMaps, overlayMaps).addTo(map);
                </script>

            </div>

        </div>
    </div>
    <div style="clear: both"></div>


{% endblock %}



